<template>
  <div :class="!$store.state.theme?'common':''">
    <vs-button
      style="margin-bottom: 16px"
      size="xl"
      @click="$router.push('/infoinfo')"
    >
      <i class="el-icon-upload el-icon--right"></i>
      <span style="padding-left: 16px">新建文章</span>
    </vs-button>
    <vs-table>
      <template #thead>
        <vs-tr>
          <vs-th>标题</vs-th>
          <vs-th>作者</vs-th>
          <vs-th>创建时间</vs-th>
          <vs-th>操作</vs-th>
        </vs-tr>
      </template>
      <template #tbody>
        <vs-tr
          :key="tr._id"
          v-for="tr in tableData"
          :data="tr"
          :is-selected="!!selected.includes(tr)"
        >
          <vs-td>{{ tr.title }}</vs-td>
          <vs-td>{{ tr.author }}</vs-td>
          <vs-td>{{ tr.time }}</vs-td>
          <vs-td
            ><div style="display: flex">
              <vs-button size="xl" transparent @click="search(tr._id)">
                <i class="el-icon-search"></i>
              </vs-button>
              <vs-button size="xl" transparent @click="deldate(tr._id)">
                <i class="el-icon-delete"></i>
              </vs-button></div
          ></vs-td>
        </vs-tr>
      </template>
    </vs-table>
    <vs-dialog full-screen v-model="visible">
      <template #header>
        <h4 class="not-margin">文章详情 <b>PLAYBOY</b></h4>
      </template>
      <div class="content">
        <el-descriptions class="margin-top" :column="2">
          <template slot="extra"> </template>
          <el-descriptions-item label="创建日期">{{
            currenttime
          }}</el-descriptions-item>
          <el-descriptions-item label="作者">{{
            currentname
          }}</el-descriptions-item>
          <el-descriptions-item label="文章">{{
            currenttitle
          }}</el-descriptions-item>
          <el-descriptions-item label="分类">
            <el-tag size="small">{{ currentsort }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="内容"> </el-descriptions-item>
        </el-descriptions>
        <div class="articess" v-html="currentarticle"></div>
      </div>

      <template #footer>
        <div style="float: right">
          <vs-button size="xl" @click="visible = false"> 朕已阅 </vs-button>
        </div>
      </template>
    </vs-dialog>
  </div>
</template>

<script>
import { articlelistAPI, articledelAPI } from "../../api/index"
import dayjs from 'dayjs'
export default {
  data () {
    return {
      visible: false,
      tableData: [],
      currenttitle: "",
      currenttime: "",
      currentarticle: "",
      currentname: "",
      currentsort: "",
      allCheck: false,
      selected: [],
      theme:true
    }
  },
  methods: {
    search (id) {
      console.log(this.$store.state.theme);
      
      var items = this.tableData.find((item) => item._id == id)
      var time = items.time.substring(0, 10)
      this.currenttitle = items.title
      this.currenttime = time
      this.currentarticle = items.article
      this.currentname = items.author
      this.currentsort = items.sort
      this.visible = true
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row"
      } else if (rowIndex === 3) {
        return "success-row"
      }
      return ""
    },
    deldate (id) {

      this.$confirm("删除该文章？此操作不可撤销！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await articledelAPI(id)
          this.$store.state.managerrefresh++
          this.$message({
            type: "success",
            message: "删除成功!",
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "用户取消",
          })
        })
    },
  },
  async mounted () {
    var { data = [] } = await articlelistAPI()
    const result = data.data.map(item => {
      return { ...item, time: dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }
    })
    this.tableData = result
  },
};
</script>

<style lang="less" scoped>
.common{
  text-shadow: 1px 1px black;
}
.content {
  height: 85vh;
  overflow-y: auto;
}
.articess {
  // editor样式
  table {
    border: none;
    border-collapse: collapse;
  }
  table td,
  table th {
    border: 1px solid #ccc;
    padding: 3px 5px;
    min-width: 50px;
    height: 20px;
  }
  table th {
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    text-align: center;
    background-color: #f1f1f1;
  }
  blockquote {
    display: block;
    border-left: 8px solid #d0e5f2;
    padding: 5px 10px;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 100%;
    background-color: #f1f1f1;
  }
  code {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    background-color: #f1f1f1;
    border-radius: 3px;
    padding: 3px 5px;
    margin: 0 3px;
  }
  pre code {
    display: block;
  }
  ul,
  ol {
    margin: 10px 0 10px 20px;
  }
  pre {
    border: 1px solid #ccc;
    background-color: #f8f8f8;
    padding: 10px;
    margin: 5px 0px;
    font-size: 0.8em;
    border-radius: 3px;
  }
  img {
    width: 300px;
  }
}

.tables td,
.tables th {
  border-bottom: 0.5px solid rgb(240, 240, 240);
  padding: 15px 0px;
  padding-right: 70px;
  padding-left: 0px;
  min-width: 200px;
  width: 100px;
  color: #606266;
}
.tables th {
  text-align: left;
  font-weight: 500;
  color: #909399;
  //   background-color: #f1f1f1;
}
.tables td {
  width: 100px;
}
.tables .tbody {
  &:hover {
    background-color: #f5f7fa;
  }
}
</style>
